﻿@using thousandClear.Areas.Shop.Models;

@model OrderModel

<div id="app">
    <div class="top-header ui-row-flex">
        <div class="top-header-return ui-col ui-col-10 ui-flex ui-flex-pack-start ui-flex-align-center back">
            <i class="ui-icon-return"></i><span>首页</span>
        </div>
        <div class="top-header-title ui-col ui-col-80 ui-flex ui-flex-align-center ui-flex-pack-center">
            <h2>订单详情</h2>
        </div>
        <div class="ui-col ui-col-10">
        </div>
    </div>
    <div class="order-title">
        <span>商品列表</span>
    </div>
    <div class="order-list">
        @foreach (var item in Model.GoodItems)
        {
            <div class="ui-row-flex ui-border-t">
                <div class="order-list-photo ui-col ui-col-2 ui-border-b ui-flex ui-flex-pack-center ui-flex-align-center">
                    <span>
                        <img src="@item.GoodImgUrl" height="40px" width="80px" />
                    </span>
                </div>
                <div class="ui-col ui-col-3 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                    <span>
                        @item.GoodName<br />
                    </span>
                </div>
                <div class="order-list-price ui-col ui-col-2 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                    <span>
                        <span>@item.Amount 积分</span><br />
                        <span>@item.Quantity 件</span>
                    </span>
                </div>
            </div>
        }
        @*<div class="ui-row-flex">
                <div class="order-list-photo ui-col ui-col-2 ui-border-b ui-flex ui-flex-pack-center ui-flex-align-center">
                </div>
                <div class="ui-col ui-col-3 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                    <span>
                        小计：
                    </span>
                </div>
                <div class="order-list-price ui-col ui-col-2 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                    <span>
                        @Model.Amount 积分
                    </span>
                </div>
            </div>*@
        @*<div class="ui-row-flex">
                <div class="order-list-photo ui-col ui-col-2 ui-border-b ui-flex ui-flex-pack-center ui-flex-align-center">
                </div>
                <div class="ui-col ui-col-3 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                    <span>
                        + 运费：
                    </span>
                </div>
                <div class="order-list-price ui-col ui-col-2 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                    <span>
                        ￥@Model.PostFee
                    </span>
                </div>
            </div>*@
        <div class="ui-row-flex">
            <div class="order-list-photo ui-col ui-col-2 ui-border-b ui-flex ui-flex-pack-center ui-flex-align-center">
            </div>
            <div class="ui-col ui-col-3 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                <span>
                    总计：
                </span>
            </div>
            <div class="order-list-price ui-col ui-col-2 ui-border-b ui-flex ui-flex-align-center ui-flex-pack-end">
                <span>
                    @Model.TotalAmount 积分
                </span>
            </div>
        </div>
    </div>
    <div class="order-title">
        <span>收货信息</span>
    </div>
    <div class="order-receive">
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    收货人:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.ReceiveMan
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    联系电话:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.ReceiveMobile
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    详细地址:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.ReceiveAddress
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    邮编:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.ReceiveZip
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    备注:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.Remark
                </span>
            </div>
        </div>
    </div>
    <div class="order-title">
        <span>订单信息</span>
    </div>
    <div class="order-info">
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    订单号:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.SerialNo
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    预约电话:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    <a href="tel:4008615110">4008615110</a>
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    订单状态:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                @if (Model.Status == 0)
                {
                    <span class="desc">
                        已下单
                    </span>
                }
                else if (Model.Status == 1)
                {
                    <span class="desc">
                        已兑换
                    </span>
                }
                else if (Model.Status == 2)
                {
                    <span class="desc">
                        已发货
                    </span>
                }
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    支付状态:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                @if (Model.PayState.Value == 0)
                {
                    <span class="desc">
                        未支付
                    </span>
                }
                else
                {
                    <span class="desc">
                        已支付
                    </span>
                }
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    兑换时间:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.OrderTime.Value.ToString("yyyy-MM-dd HH:mm")
                </span>
            </div>
        </div>
        @if (Model.Status > 1 && Model.Status < 4)
        {
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        快递公司:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        顺丰快递
                    </span>
                </div>
            </div>
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        快递单号:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.PostBillNo
                    </span>
                </div>
            </div>
        }
        <form id="form" action="../checkout" method="get">
            <input name="data" v-bind:value="data" type="hidden" />
        </form>
    </div>

    <div class="ui-btn-group">
        @if (Model.Status < 1)
        {
            <button class="ui-btn ui-btn-primary" id="pay" v-on:tap="pay">
                确认兑换
            </button>
        }
        else
        {
            <button class="ui-btn ui-btn-primary back">
                返回首页
            </button>
        }

    </div>
    <br />
    <div id="loading" class="ui-loading-block">
        <div class="ui-loading-wrap">
            <div class="ui-loading-cnt">
                <div class="sk-wave">
                    <div class="sk-rect sk-rect1"></div>
                    <div class="sk-rect sk-rect2"></div>
                    <div class="sk-rect sk-rect3"></div>
                    <div class="sk-rect sk-rect4"></div>
                    <div class="sk-rect sk-rect5"></div>
                </div>
                <i>正在加载中...</i>
            </div>
        </div>
    </div>
</div>
@section Styles{
    @Styles.Render("~/cssbundles/consumer/address")
    <style>
        body {
            background-color: #fff3f9;
        }

        .top-header {
            font-size: 16px;
            color: #fff3f9;
            background-color: #60B49D;
        }

        .top-header-title {
            font-weight: bold;
        }

        .top-header .ui-icon-return {
            font-size: 0.25rem;
            color: #fff3f9;
        }

        .order-title {
            margin-top: 10px;
        }

            .order-title span {
                margin-left: 10px;
                padding-left: 20px;
                font-weight: bold;
                border-left: 5px solid #80C3B1;
            }

        .order-list, .order-info, .order-receive {
            padding: 10px;
            font-size: 14px;
            color: #80C3B1;
        }

        .order-receive {
            padding: 10px;
        }

            .order-receive .ui-form-item {
                font-size: 14px;
            }

        .order-list-photo {
            padding-top: 10px;
            padding-bottom: 5px;
        }

        .order-list-price {
            text-align: right;
            font-size: 10px;
        }



        .order-info-item {
            padding: 10px 0;
        }

            .order-info-item .desc {
                margin-left: 10px;
            }

            .order-info-item .title {
            }
    </style>
}
@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>

        $('.back').click(function () {
            $('#loading').addClass('show');
            window.location.href = "../../../shop/Market?openid=@Model.OpenId";
        });

        var model = new Vue({
            el: '#app',
            methods: {
                back: function () {
                    this.showLoading();
                    window.location.href = "../shop/MarketOrder/list?openid=@Model.OpenId";
                },
                showLoading(){
                    $('#loading').addClass('show');
                },
                hideLoading() {
                    $('#loading').removeClass('show');
                },
                pay: function () {
                    var self = this;

                    self.showLoading();

                    $.ajax({
                        type: "GET",
                        url: "http://www.qianjing-china.com/thousandClear/Shop/MarketOrder/ReducePoint/"+@Model.Id,
                        contentType: "application/json",
                        success: function (data) {

                            if (data.toString() == "1") {
                                self.showSuccess("兑换成功");
                                location.reload();
                            }
                            else {
                                self.showError(data.toString());
                                self.hideLoading();
                            }
                        }
                    });

                },
                showError: function (msg) {
                    swal({
                        title: "",
                        text: msg,
                        type: "error",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                },
                showSuccess: function (msg) {
                    swal({
                        title: "",
                        text: msg,
                        type: "success",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                }
            }
        });
    </script>
}
